<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .login-input {
            width: 500px;
        }
        
        .login-input label {
            display: inline-block;
            width: 20%;
            text-align: right;
        }
        
        .login-input input {
            margin-left: 10px;
            width: 70%;
            outline: none;
            border: 1px solid #ccc;
            line-height: 35px;
            text-indent: 8px;
            margin-bottom: 20px;
        }
        
        .submit {
            display: block;
            width: 50%;
            margin: 30px auto 0;
            line-height: 40px;
            text-decoration: none;
            color: #333;
            text-align: center;
            border: 1px solid #ccc;
        }
    </style>
</head>

<body>
    <div id="app">
        <form action="" class="login-input">
            <div>
                <label for="uname">用户名：</label>
                <input type="text" id='uname' name="uname" placeholder="请输入用户名" v-model='uname' @keyup.delete='clearContent'>
            </div>
            <div>
                <label for="pwd">密码：</label>
                <input type="password" id='pwd' name="pwd" placeholder="请输入密码" v-model='pwd' @keyup.enter='submit'>
            </div>
            <a class="submit" @click='submit'>登录会员</a>
        </form>
    </div>
    <script src="js/vue.js"></script>
    <script>
        const vue = new Vue({
            el: '#app',
            data: {
                uname: '',
                pwd: '',
            },
            methods: {
                clearContent: function() {
                    this.uname = '';
                },
                submit: function() {
                    console.log(`submit ${this.uname} -- ${this.pwd}`);
                }
            }
        });
    </script>
</body>

</html>